<template>
  <view class="container">
    <view class="header">
      <text class="title">特殊装备</text>
    </view>

    <view class="acquire-form">
      <view class="form-row">
        <text>装备类型</text>
        <select v-model="form.type">
          <option :value="1">武器</option>
          <option :value="2">护甲</option>
          <option :value="3">头盔</option>
          <option :value="4">靴子</option>
        </select>
      </view>
      <view class="form-row">
        <text>品阶</text>
        <select v-model="form.tier">
          <option v-for="n in 9" :key="n" :value="n">{{ n }}</option>
        </select>
      </view>
      <view class="form-row">
        <button @click="onAcquire" :disabled="loading">获取特殊装备</button>
      </view>
    </view>

    <view class="list">
      <text class="sub-title">已拥有特殊装备</text>
      <view v-if="loading" class="loading">加载中...</view>
      <view v-else>
        <view v-if="items.length === 0" class="empty">暂无特殊装备</view>
        <view v-else class="items">
          <view v-for="item in items" :key="item.id" class="item-card">
            <view class="item-header">
              <text>{{ item.name }}（类型{{ typeText(item.type) }}，品阶{{ item.tier }}）</text>
              <text class="status" :class="{ on: item.equipped }">{{ item.equipped ? '已穿戴' : '未穿戴' }}</text>
            </view>
            <view class="attrs">
              <text v-for="(attr, idx) in item.attributes" :key="idx" class="attr">[{{ attr[0] }}, {{ attr[1] }}]</text>
            </view>
            <view class="actions">
              <button v-if="!item.equipped" @click="onEquip(item.type)">穿戴</button>
              <button v-else @click="onUnEquip(item.type)">卸下</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'SpecialEquipmentPage',
  data() {
    return {
      form: { type: 1, tier: 3 },
    }
  },
  computed: {
    ...mapState('specialEquipment', ['list', 'loading', 'error']),
    items() { return this.list || [] }
  },
  methods: {
    typeText(type) {
      return {1:'武器',2:'护甲',3:'头盔',4:'靴子'}[type] || type
    },
    async onAcquire() {
      const { type, tier } = this.form
      await this.$store.dispatch('specialEquipment/acquire', { type, tier })
      await this.$store.dispatch('specialEquipment/loadList')
    },
    async onEquip(type) {
      await this.$store.dispatch('specialEquipment/equip', { type })
      await this.$store.dispatch('specialEquipment/loadList')
    },
    async onUnEquip(type) {
      await this.$store.dispatch('specialEquipment/unequip', { type })
      await this.$store.dispatch('specialEquipment/loadList')
    }
  },
  async mounted() {
    await this.$store.dispatch('specialEquipment/loadList')
  }
}
</script>

<style scoped>
.container { padding: 12px; }
.header { display:flex; align-items:center; justify-content:space-between; }
.title { font-size:18px; font-weight:bold; }
.sub-title { margin-top:12px; font-weight:bold; }
.acquire-form { margin-top:12px; border:1px solid #ddd; padding:10px; border-radius:8px; }
.form-row { margin-bottom:8px; display:flex; gap:8px; align-items:center; }
.list { margin-top:16px; }
.items { display:flex; flex-direction:column; gap:12px; }
.item-card { border:1px solid #eee; border-radius:8px; padding:10px; }
.item-header { display:flex; justify-content:space-between; align-items:center; }
.status { color:#999; }
.status.on { color:#27ae60; }
.attrs { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
.attr { background:#f7f7f7; padding:2px 6px; border-radius:6px; font-size:12px; }
.actions { margin-top:8px; display:flex; gap:8px; }
.loading { color:#999; }
.empty { color:#999; }
</style>